Vue.component2('select3_____menu_default_item', {  
    template: `
<div class="select3_____sub_menu_item" @click="click">
    {{data.text}}
</div>
  `,  
  data(){  
  
    return {  
        data:{
            __key__:"1",
            text:"line",
            callback:null,
        }
        
        
    }    
  
  },
    methods: {  
        click(){
            try{
                this.data.callback(this.data.__key__)
            }catch{}
          },
    },  
    
  mounted:function(){
    _this.data.callback=_this.deepcopy_data.callback;
    }
  } 
  );
  
  

Vue.component2('select3_____menu', {  
    template: `
        <div class="select3_____sub_menu" ref="body"  v-show='show_flag'>
            
        </div>
  `,
  data(){
    return{
        show_flag:false,
        data:{
            menu_data:[],
            menu_item_vue_name:"select3_____menu_default_item",
            __menu_data:[],
        }
    }
  },
  watch:{
  },
  methods:{
    remove_dom:function(){
            // 获取当前元素的所有子元素
            let children = Array.from(this.$refs.body.children);
            // Array.from(select3_____vue.$refs.ref_obj.$refs.body.children)
            for(let i=0;i<children.length;i++){
                if (children[i].tagName.toLowerCase() !== 'style'){
                    this.$refs.body.removeChild(children[i]);
                }
            }
            this.data.__menu_data=[];
    },
    create_dom:function(obj){
        this.create_time=Date.now();
        // console.log("##########obj",obj)
        this.init_style();
        this.$refs.body.style.left=obj.x+'px';
        this.$refs.body.style.top=obj.y+'px';
        // console.log("##########this.show_flag1",this.show_flag)
        this.show_flag=true;
        this.data.menu_data=obj.menu_data;
        this.data.menu_item_vue_name=obj.vue_name;
        let _this=this;
        this.data.callback=async function(xxx){
            _this.show_flag=false;
            try{
                await obj.callback(xxx);}
            catch{
                obj.callback(xxx);
            }
        }
        this.remove_dom();
        for(let __key__=0;__key__<this.data.menu_data.length;__key__++){
            let new_dom=document.createElement(this.data.menu_item_vue_name);
            //设置dom属性 ref值为ref_obj
            new_dom.setAttribute('ref','ref_obj');
            new_dom.setAttribute(':deepcopy_data','deepcopy_data');
            let deepcopy_data=JSON.parse(JSON.stringify(this.data.menu_data[__key__]));
            deepcopy_data['__key__']=__key__;
            deepcopy_data['callback']=_this.data.callback;
            //设置vue
            let vue_dct={'el':new_dom,data:{deepcopy_data:deepcopy_data}};
            // 将这个 div 添加到 document.documentElement（即 <html> 元素）  
            this.$refs.body.appendChild(new_dom);
            //渲染vue组件
            this.data.__menu_data.push(new Vue(vue_dct));
        }
        
        // console.log("##########this.show_flag2",this.show_flag)
    },
    init_style:function(){
        try{
            // 判断是否找到了style标签
            if (!this.$refs.body.querySelector("style")) {
            // 不存在style标签时执行的操作（可选）
            let new_dom=document.createElement("style");
            new_dom.innerHTML=`
                    .select3_____sub_menu {
                        position: absolute;
                        background-color: #212121;
                        /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); */
                        z-index: 1000;
                        padding:5px;
                        border: 1px solid #2b2b2b;
                        border-radius: 8px;
                        width:100px;
                    }
                    .select3_____sub_menu_item {
                        color:rgba(231, 231, 231, 0.6);
                        white-space: nowrap;border-radius: 4px;
                    
                        -webkit-user-select: none;
                        display: flex;
                        justify-content: center; 
                        align-items: center;   
                        cursor: pointer;
                    }
                    .select3_____sub_menu_item:hover{    outline: 1px solid #0078d4;
                        background-color: rgb(4, 57, 94);
                        color:rgba(231, 231, 231, 0.6);
                    }`;
          this.$refs.body.appendChild(new_dom);

        }
        }catch (err){console.log("err:",err)}
    }
  },
  
  mounted:function(){
  ttime2(function(){try{return this.$refs.body}catch{return 0}},this.init_style);
  _this.data.refresh=function(){_this.refresh='2'?'1':'2'};
  _this.data.x=_this.deepcopy_data.x;
  _this.data.y=_this.deepcopy_data.y;
  }
  
  })











  
  window.select3_____dom=null;//表示菜单的dom
  window.select3_____vue=null;//表示菜单的dom
  window.select3__=function(obj){
  
  let x=null;
  let y=null;
  if(obj.event){
    obj.x=obj.event.clientX;
    obj.y=obj.event.clientY;
  }
  if(obj.add_xy){
    obj.x=obj.x+obj.add_xy.x;
    obj.y=obj.y+obj.add_xy.y;
  }
  let deepcopy_data={}
  //如果菜单不存在则创建一个菜单
  if(!select3_____dom){
  let new_dom=document.createElement('select3_____menu');
  //设置dom属性 ref值为ref_obj
  new_dom.setAttribute('ref','ref_obj');
  new_dom.setAttribute(':deepcopy_data','deepcopy_data');
  //设置vue
  let vue_dct={'el':new_dom,data:{true:true,false:false,null:null,deepcopy_data:deepcopy_data}};
  // 将这个 div 添加到 document.documentElement（即 <html> 元素）  
  document.documentElement.appendChild(new_dom);
  //渲染vue组件
  window.select3_____vue=new Vue(vue_dct);
  window.select3_____dom=new_dom;
  
  document.addEventListener('click', function(event) {
    // Check if the clicked element is not doma and not a descendant of doma
    if (!window.select3_____vue.$refs.ref_obj.$el.contains(event.target)) {
    //   console.log("隐藏")
        // console.log("鼠标点击其他位置 判断是否隐藏")
        let t=Date.now();
        if (window.select3_____vue.$refs.ref_obj.create_time+500<t){
            // console.log("超过0.5秒 隐藏")
            window.select3_____vue.$refs.ref_obj.show_flag=false;
        }else{
            // console.log("没有超过0.5秒",window.select3_____vue.$refs.ref_obj.create_time,t)
        }
    }
  });
  }else{
    select3_____vue.$refs.ref_obj.show_flag=true;
    
    window.select3_____vue.$refs.ref_obj.create_dom(obj);
  }
  
  
  }

  window.select3__({
    x:333,y:444,menu_data:[{"text":'ss'},{"text":'yy'},],vue_name:"select3_____menu_default_item",callback:function(select){console.log("当前选择:",select)}
  })

